<%@ include file="../common/top.jsp"%>
<div id="BackLink">
  <a href="mainForm">Return to Main Menu</a>
</div>

<div id="Catalog">
  <form action="editAccount" method="post">
    <c:if test="${requestScope.newMsg != null}">
      <p> <font color="red">${requestScope.editMsg} </font> </p>
    </c:if>
    <h3>User Information</h3>

    <table>
      <tr>
        <td>User ID:</td>
        <td>${loginAccount.username}</td>
      </tr>
      <tr>
        <td>New password:</td>
        <td><input type="password" name="password" id="password"></td>
      </tr>
      <tr>
        <td>Repeat password:</td>
        <td><input type="password" name="rpassword" id="rpassword"></td>
        <td><div id="passwordFeedback"></div></td>
        <script>
          var     elPassword =document.getElementById('password'),
                  elRpassword=document.getElementById('rpassword');
          elRpassword.addEventListener("blur", function() {
            var password = elPassword.value;
            var rpassword = elRpassword.value;

            if (password !== rpassword) {
              document.getElementById("passwordFeedback").innerText = "different";
            } else {
              document.getElementById("passwordFeedback").innerText = '';
            }
          });
        </script>
      </tr>
    </table>
    <%@ include file="includeAccountField.jsp"%>
    <input type="submit" name="editAccountForm" value="Save Account Information">

  </form>

  <a href="listOrder">My Orders</a>
</div>

<%@ include file="../common/bottom.jsp"%>
